<template>
	   <div>
				<ul class="onetop" >
					<li v-for="(it,index) in dantitle" :key="index" @click="titlbtn(index)">
						<span class="one"  :class="[{'oneteo':it.isfale}]"></span>{{it.text}}
					</li>
				</ul>
				<ul class="onebootn" @click.stop.prevent="">
					<li v-for="(im,inx) in dtansplice" :key="inx"  @click.stop.prevent="onebtn(inx)">
						<span class="one" :class="[{'oneteo':im.isfale}]"></span> {{im.title}}{{im.isfale}}
					</li>
				</ul>
				<h3>结果</h3>
				<ul v-if="dtan.length"  >
					<li v-for="(idata,ind) in dtan" :key="ind"  >{{idata.title}}</li>
				</ul>
		 </div>
</template>

<script>
import {mapGetters,mapState, mapMutations, mapActions} from 'vuex'
export default {
	name:"danone",
	props: {
		setDatas:{//数据
			type:[Array,Object],
			default:[]
		}
	},
	data(){
		return{
				dtan:[],
				dtansplice:[],
				dantitle:[
					{
						isfale:false,
						text:"全选"
					},
					{
						isfale:false,
						text:"反选"
					},
					{
						isfale:false,
						text:"多选"
					},
				]
		}
	},
	created () {
	},
	mounted() {
		if(this.setDatas.length){
			 this.scllorData=[...this.setDatas]
			 this.scllorData.forEach((data,index) => {
				 data.isfale=false;
			 });
			 this.dtansplice=[...this.scllorData.slice(0,6)]
		}
	},
	methods: {
		titlbtn(index){
			switch (index) {
			 	case 0:
					let sp=this.chongclear(this.dantitle,index)
					this.alltrue(index,sp)
			 		break;
				case 1:
					let stwo=this.chongclear(this.dantitle,index)
					console.log("stwo",stwo)
					this.isall(index,stwo)
					break;
				case 2:
					let san=this.chongclear(this.dantitle,index)
					console.log(san)
					san?this.dantitle[2].isfale=false:this.dantitle[2].isfale=true
					break;
			 	default:
					
			 		break;
			 }
		},
		chongclear(doms,index,isfa=false){
			let indexfalse=doms[index].isfale
			this.funAll(doms,isfa)
			return indexfalse
		},
		alltrue(index,ix){//全选
			let som=this.dtansplice.some((item,index)=>{
				  return !item.isfale
			})
			som?this.funAll(this.dtansplice,true):this.funAll(this.dtansplice,false)
			ix?(this.dantitle[index].isfale=false):(this.dantitle[index].isfale=true)
			this.addArray()
		},
		isall(index,ix){//反选
			ix?(this.dantitle[index].isfale=false):(this.dantitle[index].isfale=true)
			this.dtansplice.forEach((item)=>{
					item.isfale=!item.isfale
			})
		  let som=this.dtansplice.some((item,index)=>{
		    return !item.isfale
			})
			if(!som){
				this.funAll(this.dantitle)
				this.dantitle[0].isfale=!this.dantitle[0].isfale
			}
			this.addArray()
		},
		funAll(allom,isone=false){
			allom.forEach((data,ix)=>{
				data.isfale=isone
			})
		},
		onebtn(index,data){//单选
			let sstart=[...this.dtansplice]
			sstart[index].isfale=!sstart[index].isfale
			this.dtansplice=sstart
			let som=this.dtansplice.some((item,index)=>{
				return !item.isfale
			}) 
			if(!som){
				this.funAll(this.dantitle,false)
				this.dantitle[0].isfale=true
			}
			this.addArray()
		},
		addArray(){
			let sc=this.dtansplice.filter((item,index)=>{
				if(item.isfale){
					 return item
				 }
			})
			this.dtan=sc
		}
		

	},
	computed:{
	
	},
	watch:{

	},
	components:{
  }
	
}

</script>

<style scoped >
	  .onetop{
			display: flex;

		}
		.onetop>li{
			width: 120px;
			height: 30px;
			color: #fff;
			line-height: 30px;
			padding: 10px;
			font-size: 20px;
			
			
		}
	  .one{
			display: inline-flex;
			width: 18px;
			height: 18px;
			background: url(./img/no.png) no-repeat center center;
			background-size:cover;
			margin-top:5px;
			vertical-align: top;
			
		}
		.onebootn{
			width: 400px;
			height: 360px;
			overflow-y: scroll;
			overflow-x: hidden;
		}
		.onebootn li{
			height: 24px;
			line-height: 24px;
			border-bottom:1px solid #fff;
			padding: 10px;
			font-size: 18px;
		}
		.oneteo{
			background: url(./img/yes.png) no-repeat center center;
			background-size:cover;
		}
</style>

